<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        .v-enter-from,
        .v-leave-to {
            opacity: 0;
            transform: translateX(50px);
        }

        .v-move,
        .v-enter-active,
        .v-leave-active {
            transition: all 1s linear 0s;
        }

        .v-leave-active {
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <template id="root">
        <div>
            <input type="text" v-model="taskName"><button @click="addTask">添加任务</button>
            <doing-component :doing-list="doingList" @complete-task="handleComplete"></doing-component>
            <done-component :done-list="doneList" @delete-task="handleDelete" @delete-all-task="allDelete"></done-component>
        </div>
    </template>
    <template id="doing">
        <div>
            待定列表
            <transition-group>
                <li v-for="item in doingList" :key="item">
                {{item}}<button @click="completeTask(item)">完成</button>
                </li>
            </transition-group>
        </div>
    </template>
    <template id="done">
        <div>
            已完成列表<button @click="deleteAllTask()">删除所有</button>
            <transition-group>
                <li v-for="item in doneList" :key="item">
                {{item}}<button @click="deleteTask(item)">删除</button>
                </li>
            </transition-group>
        </div>
    </template>
</body>
<script>
    const{ref}=Vue
    const app=Vue.createApp({
        template:"#root",
        setup(){
            const taskName = ref('')
            const doingList = ref([])
            const doneList = ref([])
            const addTask = () => {
                doingList.value.push(taskName.value)
            }
            const handleComplete = (item) =>{
                doingList.value.splice(doingList.value.indexOf(item),1)
                doneList.value.push(item)
            }
            const handleDelete = (item) =>{
                doneList.value.splice(doneList.value.indexOf(item),1)
            }
            const allDelete = () =>{
                doneList.value.splice(0,doneList.value.length)
            }
            return{
                taskName,addTask,doingList,doneList,handleComplete,handleDelete,allDelete
            }
        }     
    })
    app.component('doingComponent',{
        template:"#doing",
        props:{
            doingList:Array
        },
        setup(props,{emit}){
            const completeTask = (item) =>{
                emit('completeTask',item)
            }
            return{
                completeTask
            }
        }
    })
    app.component('doneComponent',{
        template:"#done",
        props:{
            doneList:Array
        },
        setup(props,{emit}){
            const deleteTask = (item) =>{
                emit('deleteTask',item)
            }
            const deleteAllTask = () =>{
                emit('deleteAllTask')
            }
            return{
                deleteTask,deleteAllTask
            }
        }
    })
    app.mount('#app')
</script>
</html>